<template>
  <div class="warp">
    <swiper :options="swiperOption" v-if="swiper.length">
      <!-- slides -->
      <swiper-slide v-for="item of swiper" :key="item.id">
        <img :src="item.imgUrl">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  // data(){}是es6的写法,data:function(){}是es5的写法，子组件中的data是一个函数并且有返回值
    export default {
        name: "HomeSwiper",
        props:{
          swiper:Array
        },
        data (){
          return {
            swiperOption:{
              pagination:'.swiper-pagination',
              loop:true
            }
          }
        }
    }
</script>

<style scoped lang="stylus">
  /*warp解决轮播图下面组件网速比较慢是，图片还没加载和图片加载好下面组件的抖动问题*/
  /*.warp >>> .swiper-pagination-bullet-active是样式穿透，因为分页组件是传给swiper组件的，所以直接写样式改变不了滑块的颜色*/
  .warp >>> .swiper-pagination-bullet-active{ background: #ffffff}
  .warp{ width: 100%;height: 0;overflow: hidden;padding-bottom: 26.7%;background: #eee}
  .swiper-slide img{ width: 100%}
</style>
